<template>

  <div class="collapse-wrap">
    <wrap-content ref="wrap-content"/>
    <div class="expand-footer-wrap" @click="showMore">
      <div class="expand-btn-container">
        <i :class="expandBtnCls" :style="expandBtnStyle"></i>
        <span>{{isExpand ? '收起': '展示更多'}} </span>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'ShowMoreContent',
    props: {

      iconSize: {
        type: Number,
        default: 29
      },
      foldHeight: {
        type: String,
        default: '310px'
      }

    },
    components: {
      WrapContent: {
        render(h) {
          const { $scopedSlots, foldHeight } = this.$parent
          const parent = this.$parent
          return h('div', {
              class: { 'collapse-container': true },
              style: {
                transition: 'height 0.2s',
                height:foldHeight,
              }
            },
            [
              h('transition', {
                  on: {
                    beforeAppear(el) {
                      // console.log(el.parentNode);
                       // el.parentNode.style.height = foldHeight
                    },
                    appear(el) {
                      // console.log(el.parentNode);
                      parent.oldOverflow = el.parentNode.style.overflow //  save原有的overflow
                      parent.wrapEl = el.parentNode
                      parent.originHeight = el.parentNode.scrollHeight

                      el.parentNode.style.overflow = 'hidden'
                    },
                    afterAppear(el) {
                      // el.style.overflow = 'visible'
                      // el.style.height = ''
                    }

                  }
                }, $scopedSlots.default()
              )
            ]
          )
        }
      }
    },
    created(){
      // window.addEventListener('resize', (e)=>{
      //                 console.log(e);
      // })
    },
    data() {
      return {
        isExpand: false,
        originHeight: 0
      }
    },
    computed: {
      expandBtnCls() {
        return [
          this.isExpand ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
        ]
      },
      expandBtnStyle() {
        return {
          fontSize: `${this.iconSize}px`
        }
      }
    },
    methods: {
      toggleShow(){
        this.showMore()
      },
      // wrapEl:null,
      showMore() {
        console.log('~~~~~~showMore~~~~~~~');
        this.isExpand = !this.isExpand
        const { ['wrap-content']: { $el: wrapRefs } } = this.$refs
        // console.log(this.wrapEl.scrollHeight)
        // console.log( this.originHeight)
        if (this.isExpand) {
          wrapRefs.style.height = this.wrapEl.scrollHeight + 'px'
          // wrapRefs.style.height = this.originHeight + 'px'
          // console.log(this.wrapEl);
          wrapRefs.style.overflow = this.oldOverflow
        } else {
          wrapRefs.style.overflow = 'hidden'
          wrapRefs.style.height = this.foldHeight
        }
      }

    }

  }
</script>

<style lang="scss" scoped>

  .collapse-wrap {
    position: relative;

    .expand-footer-wrap {
      height: 30px;
      text-align: center;
      cursor: pointer;
      /*border:1px solid #ccc;*/
      /*border-radius: 3px;*/
      /*background: #ccc;*/

      /*margin-bottom: 30px;*/
      .expand-btn-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

</style>
